<template>
    <div class="radar-box">
        <div :style="{ width: width + 'px' }" style="margin-bottom: 30px;"><custom-title :title="title" /></div>
        <div class="rank-box" :style="{ width: width + 'px', height: height + 'px' }">
            <ResponsiveBarChart :options="chartOptions" @bar-clicked="onBarClicked" />
        </div>
    </div>
</template>
  
<script>
import ResponsiveBarChart from '@/components/echarts/ResponsiveBarChart.vue';
import * as echarts from 'echarts';
export default {
    name: 'annular',
    components: {
        ResponsiveBarChart,
    },
    props: {
        width: {
            type: Number,
            default: 800
        },
        height: {
            type: Number,
            default: 300
        },
        title: {
            type: String,
            default: '柱状图'
        },
        optionTitle: {
            type: String,
            default: '%'
        },
        seriesData: {
            type: Array,
            default: () => [12, 30, 20, 24, 6,8,30]
        },
        xAxisData: {
            type: Array,
            default: () => ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        //给出一个当前柱状图中最高的数据点，用来生成类似于、看起来像柱子的到顶的背景颜色
        columnBgData: {
            type: Number,
            default: 40
        },
        //手动以柱子重叠来创造的"视觉性背景图"，需要依赖一个百分比对数据柱子进行挪移，实现效果，调用组件根据数据长度和图表宽度，自行调整
        barGap: {
            type: String,
            default: '-250%'
        },
    },
    data() {
        return {
            chartOptions: {},
        }
    },
    created() {
        this.columnBgDataArray = new Array(this.seriesData.length).fill(this.columnBgData);
        this.getOption()
    },
    mounted() { },
    computed: {},
    watch: {},
    methods: {
        onBarClicked(params) {
            console.log(params);
            // 在这里处理点击事件，例如弹出模态框显示更多数据
        },
        getOption() {
            this.chartOptions = {
                title: {
                    text: this.optionTitle,
                    left: '7%', // 距离左边10像素
                    top: '0',  // 距离顶部10像素
                    textStyle: {
                        color: 'rgba(217, 231, 255, 1)',
                        fontSize: 12,
                        fontWeight: 'bold',
                    }
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: { //鼠标经过
                        show: false,
                        type: 'shadow', //阴影
                        // type: 'cross', //横线
                        // crossStyle: {
                        //     color: 'red'
                        // }
                    },
                    formatter: function (params) {
                        return '小浮窗' + '<br/>' + params[0].name + ': &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;' + params[0].value
                    }
                },
                grid: {
                    // left: '30%', // 调整左侧边距
                    right: '5%', // 调整右侧边距
                    top: '10%', // 调整顶部边距
                    // bottom: '10%', // 调整底部边距
                },
                xAxis: {
                    type: 'category',
                    data: this.xAxisData,
                    axisLabel: {
                        textStyle: {
                            color: 'rgba(217, 231, 255, 1)' // 修改X轴刻度颜色
                        }
                    }
                },
                yAxis: [
                    {
                        type: 'value',
                        axisLabel: {
                            textStyle: {
                                color: 'rgba(217, 231, 255, 1)' // 修改Y轴刻度颜色
                            }
                        },
                        splitLine: {
                            show: true,
                            lineStyle: {
                                type: 'dashed',
                                color: 'rgba(255, 255, 255, 0.15)',
                            }
                        },
                    }
                ],
                series: [
                    {
                        data: this.seriesData,
                        type: 'bar',
                        barWidth: 16,
                        zlevel: 1,
                        label: {
                            show: true,
                            position: 'top', // 标签位置设置为顶部
                            formatter: function (params) {
                                // 在这里修改，将数据值加上百分号
                                return '{c|' + params.data + '%}';
                            },
                            rich: {
                                c: {
                                    fontSize: 12, // 设置字体大小
                                    color: 'rgba(217, 231, 255, 1)', // 设置字体颜色
                                    lineHeight: 20,
                                    align: 'center',
                                    // 下划线
                                    // 在ECharts中，下划线的样式不能直接在rich中设置，而是通过添加额外的空格元素并设置其样式来实现
                                    // 下面的代码段展示了如何添加一个带有下划线的空格元素
                                    formatter: function (params) {
                                        return '{c|' + params.data + '} {underline|}'; // 使用富文本显示数据值和下划线
                                    },
                                    underline: {
                                        fontSize: 14, // 确保与主文本大小一致
                                        color: 'rgba(217, 231, 255, 1)', // 确保与主文本颜色一致
                                        lineHeight: 20,
                                        align: 'center',
                                        // 下划线样式
                                        textBorderColor: 'rgba(217, 231, 255, 1)',
                                        textBorderWidth: 1,
                                        textBorderType: 'solid',
                                        // 下划线长度控制，这里设置为自动计算宽度
                                        // 实际使用时可能需要根据具体情况调整
                                        width: function () {
                                            return echarts.format.truncateText(params.data, 50, '14px Microsoft YaHei', '...');
                                        },
                                    },
                                },
                            },
                        },
                        itemStyle: {
                            color: {
                                type: 'linear',
                                x: 0, y: 0, x2: 0, y2: 1,
                                colorStops: [
                                    { offset: 0, color: 'rgba(0, 58, 255, 0)' }, // 0% 处的颜色
                                    { offset: 1, color: 'rgba(21, 154, 255, 1)' } // 100% 处的颜色
                                ],
                                globalCoord: false // 缺省为 false
                            }
                        },
                        markLine: {
                            symbol: ['none', 'arrow'],
                            // symbolSize: [0, 15],
                            silent: true,
                            data: [
                                { // 这里可以添加多个对象来表示多条线
                                    yAxis: 16.66, // 指定 Y 轴上的值
                                    label: {
                                        normal: {
                                            show: true,
                                            position: 'end',
                                            formatter: '16.66',
                                            textStyle: {
                                                color: 'rgba(255, 119, 52, 1'
                                            }
                                        }
                                    },
                                    lineStyle: {
                                        color: 'rgba(255, 119, 52, 1)',
                                        width: 1,
                                        type: 'dashed',
                                    }
                                }
                            ]
                        },
                    },
                    {
                        data: this.columnBgDataArray,
                        type: 'bar',
                        barWidth: 62,
                        barGap: this.barGap,
                        itemStyle: {
                            color: 'rgba(143, 171, 191, 0.10)',
                        },
                    }
                ]
            }
        }
    },

}
</script>
  
<style lang='less' scoped></style>